<template>
	<view class="paddBot">
		<view class="queContent">
			<view class="queConTop hasFlex"> 
				<image class="headImg" v-if="detInfo.userPortrait == ''" src="../../../static/images/defHead.png"></image>
				<image class="headImg" v-else :src="getCloudFilePath(detInfo.userPortrait)"></image>
				<view class="usename">{{detInfo.realName}}</view>
			</view>
			<view class="ansQuesTit multiEllip clamp2">{{detInfo.askTitle}}</view>
			<view class="detContent"><jyf-parser :html="detInfo.askContent" :selectable="true"></jyf-parser></view>
			<view class="queBot spaceBet">
				<view class="time">{{detInfo.addTime}}</view>
				<view class="right hasFlex">
					<view class="ly hasFlex" @tap="addComment">
						<text class="iconfont icon-message"></text>
						<text>{{detInfo.plNum}}</text>
					</view>
					<view class="favor hasFlex" @tap="dzQue">
						<text class="iconfont icon-favor" v-if="detInfo.dzTag == 0"></text>
						<text class="iconfont icon-favor spec" v-if="detInfo.dzTag == 1"></text>
						<text>{{detInfo.upNum}}</text>
					</view>
				</view>
			</view>
		</view>
		<block v-if="isHasDataFlag">
			<view class="commentList">
				<view class="listItem spec"
					v-for="(item,index) in answerList"
					:key="index"
				>
					<view class="quesWrap">
						<view class="listItemTop hasFlex">
							<view class="itemImg hasFlex">
								<view class="headImg"> 
									<image class="samePar" v-if="item.userPortrait == ''" src="../../../static/images/defHead.png"></image>
									<image class="samePar" v-else :src="getCloudFilePath(item.userPortrait)"></image>
								</view>
								<view class="usename">{{item.realName}}</view>
							</view>
							<view class="topRight time">{{item.addTime}}</view>
						</view>
						<view class="itemCon">
							<jyf-parser :html="item.askContent" :selectable="true"></jyf-parser>
						</view>
					</view> 
				</view>
			</view>
			<loading-view :loading="loading"></loading-view>
		</block>
		<block v-else-if="isHasDataFlag == false">
			<no-data></no-data>
		</block>
		<view class="btnGroupBot">
			<button class="comBtn" @tap="addComment">我来说几句</button>
		</view>
	</view>
</template>

<script>
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	import { getQueDet,addOrCancelUp } from '@/api/ansQue/index'
	const app = getApp();
	export default {
		components:{
			jyfParser
		},
		data(){
			return{
				currOpt:'',
				nowPage:1,
				loading:false,
				queId:'',
				detInfo:{},
				answerList:[],
				isHasDataFlag:null,
				currIndex:-1,
				isRefreshFlag:false,
				fromPage:'',//ansQueList indexPage
				currPlNum:0,
			}
		},
		computed:{
			getCloudFilePath_1(){
				return function(str){
					console.log('地址=',str)
				}
			}
		},
		onLoad(options){
			this.fromPage = options.fromPage;
			this.queId = options.queId;
			if(options.fromPage == 'ansQueList'){
				this.currIndex = options.currIndex;
			}
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline'],
			})
			this.getQueDetInfo();
		},
		onShow(){
			if(this.isRefreshFlag){
				this.initParams();
			}
		},
		onUnload(){
			if(this.isRefreshFlag && this.fromPage == 'ansQueList'){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.ansQueList[this.currIndex].plNum = this.currPlNum;
			}
		},
		onHide(){
			this.isRefreshFlag = false;
		},
		onPullDownRefresh : function(){
			this.initParams();
			uni.stopPullDownRefresh();
		},
		onReachBottom : function(){
			if( !this.loading ){
				this.getQueDetInfo();
			}
		},
		methods:{
			onShareAppMessage(res){
				return{
					title:this.detInfo.askTitle + '心理问答详情详情',
					imageUrl:this.shareDefAnsQue
				}
			},
			//点赞问题
			dzQue(){
				if(uni.getStorageSync('userIdZz')){
					var field = { askId:this.queId };
					addOrCancelUp(field).then(res=>{
						this.detInfo.dzTag = this.detInfo.dzTag == 1 ? 0 : 1;
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2];
						if(this.detInfo.dzTag == 1){ 
							this.detInfo.upNum += 1;
							if(this.fromPage == 'ansQueList'){
								prevPage.$vm.ansQueList[this.currIndex].upNum += 1;
							}
							//prevPage.$vm.ansQueList[this.currIndex].dzTag = 1;
						}else{
							this.detInfo.upNum -= 1;
							if(this.fromPage == 'ansQueList'){
								prevPage.$vm.ansQueList[this.currIndex].upNum -= 1;
							}
							//prevPage.$vm.ansQueList[this.currIndex].dzTag = 0;
						}
					}).catch(err=>{
						if(err.data.code == 30015){
							this.util.showToast('不能对自己发布的问题收藏哟~');
						}
					});
				}else{
					uni.navigateTo({
						url:'/pages/login/login?loginNum=0'
					})
				}
			},
			getQueDetInfo(){
				var field = { parentId:this.queId,page:this.nowPage,limit:this.limit };
				let { nowPage,answerList } = this;
				this.loading = true;
				getQueDet(field).then(res=>{
					if(this.nowPage == 1){
						this.detInfo = res.data.datas;
						this.currPlNum = res.data.datas.plNum;
						if(res.data.datas.answerList.length == 0){
							this.loading = false;
							this.isHasDataFlag=false;
						}
					}
					if(res.data.datas.answerList.length > 0){
						nowPage += 1;
						answerList.push( ...res.data.datas.answerList );
						this.answerList = answerList;
						this.nowPage = nowPage;
						this.loading = false;
						this.isHasDataFlag = true;
					}else{
						if(this.nowPage > 1){
							this.loading = false;
						}
					}
				}).catch(err=>{
					console.log(err)
				}); 
			},
			initParams(){
				this.nowPage = 1;
				this.loading = false;
				this.answerList = [];
				this.getQueDetInfo();
			},
			addComment(){
				if(uni.getStorageSync('userIdZz')){
					uni.navigateTo({
						url:'/pages/subIndex/addComment/addComment?resId=' + this.queId + '&fromPage=queDetPage'
					})
				}else{
					uni.navigateTo({
						url:'/pages/login/login?loginNum=0'
					})
				}
			}
		}
	}
</script>
<style lang="scss">
	page{
		background: $pss-bg-primary;
	}
</style>
<style lang='scss' scoped>
	@import '@/static/scss/zxsPj.scss';
	.paddBot{
		padding-bottom: 120rpx;
	}
	.ansQuesTit{
		font-size: 36rpx;
		color: $pss-text-color3;
		font-weight: bold;
		padding: 10rpx 0;
	}
	.commentList{
		padding: 0 30rpx;
		background: #fff;
		.listItem:last-child{
			border-bottom: none;
		}
	}
	.btnGroupBot{
		height: 120rpx;
		width: 100%;
		box-shadow: 0 -5rpx 8rpx rgba(0,0,0,.05);
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0rpx;
		z-index: 100; 
	}
	.btnGroupBot .comBtn{
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: $pss-color-blueDeep;
		border-radius: 50rpx;
	}
	.queContent{
		padding: 0 30rpx;
		background: #fff;
		margin-bottom: 20rpx;
		.queBot{
			color: $pss-text-colora;
			align-items: center;
			padding-bottom: 40rpx;
			.time{
				font-size: $font-size26;
			}
			.right{
				height: 40rpx;
				line-height: 40rpx;
				.ly{
					height: 100%;
					font-size:30rpx;
					padding-left: 50rpx;
					align-items: center;
					.icon-message{
						font-size: 36rpx;
						margin-right: 5rpx;
						color: $pss-text-colord;
					}
				}
				.favor{
					align-items: center;
					font-size:30rpx;
					padding-left: 50rpx;
					.icon-favor{
						font-size: 28rpx;
						margin-right: 5rpx;
						color: $pss-text-colord;
						&.spec{
							color: $pss-color-red;
						}
					}
				}
			}
		}
		.detContent{
			font-size: $font-size30;
			color: $pss-text-color8;
			padding-bottom: 10rpx;
			line-height: 50rpx;
		}
		.queConTop{
			align-items: center;
			margin-bottom: 10rpx;
			padding-top: 10rpx;
			/* padding: 20rpx 0; */
			.headImg{
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				margin-right: 15rpx;
				flex-shrink: 0;
			}
			.usename{
				font-size: $font-size30;
				color: $pss-text-color3;
			}
		}
	}
</style>